<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    :config="editorConfig"
    :disabled="readonly"
    @ready="onEditorReady"
  />
</template>

<script>
import { merge, mergeWith, isArray } from 'lodash-es'
import { Ckeditor } from '@ckeditor/ckeditor5-vue'
import { ClassicEditor } from '@rev-ai/ckeditor5-classic'

export default {
  name: 'Editor',
  components: { Ckeditor },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    config: {
      type: Object,
      default: () => ({})
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editorInstance: null,
      editor: ClassicEditor,
      defaultConfig: {
        language: 'zh-cn',
        toolbar: {
          items: [
            'heading',
            'blockQuote',
            '|',
            'bold',
            'underline',
            'italic',
            'strikethrough',
            '|',
            'fontColor',
            'fontBackgroundColor',
            'fontSize',
            'fontFamily',
            'removeFormat',
            '|',
            'alignment',
            'bulletedList',
            'numberedList',
            'outdent',
            'indent',
            '|',
            'link',
            'insertTable',
            'imageInsert',
            'mediaEmbed',
            'undo',
            'redo'
          ]
        },
        htmlSupport: {
          allow: [
            {
              name: /.*/,
              attributes: true,
              classes: true,
              styles: true
            }
          ]
        },
        image: {
          toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage'
          ]
        },
        mediaEmbed: {
          toolbar: ['mediaEmbed']
        },
        table: {
          contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties']
        },
        allowedContent: {
          img: {
            attributes: '!src, alt', // src is required
            styles: 'height, width, position, left, top'
          }
        }
      }
    }
  },
  computed: {
    editorConfig() {
      return this.mergeConfig(this.defaultConfig, this.config)
    },
    editorData: {
      get: function () {
        return this.modelValue
      },
      set: function (value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    mergeConfig(obj, other) {
      return Object.assign({}, obj, other)
    },
    onEditorReady(editorInstance) {
      this.$emit('ready', editorInstance)
      this.editorInstance = editorInstance
      editorInstance.on('blur', () => {
        console.log('Editor lost focus!')
      })
      this.$nextTick(() => {
        editorInstance.focus()
      })
    }
  }
}
</script>
<style>
.ck.ck-powered-by {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.ck.ck-editor {
  display: flex;
  flex-direction: column;
  height: 100% !important;
}

.ck.ck-editor .ck.ck-editor__main {
  flex: 1;
  overflow: hidden;
}

.ck.ck-editor .ck.ck-editor__main .ck.ck-content {
  height: 100%;
  overflow: auto;
}

.ck.ck-editor .ck.ck-editor__main .ck-source-editing-area {
  height: 100%;
  overflow: auto;
}

.ck.ck-editor .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
  flex-wrap: wrap;
}

.ck.ck-balloon-panel:has(.ck-toolbar__items:empty) {
  display: none;
}

/* 隐藏自带按钮和样式 */
.ck.ck-reset_all.ck-widget__type-around {
  display: none;
}
.ck.ck-widget__selection-handle {
  display: none;
}
.ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child,
.ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child {
  margin-top: 5px !important;
}
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected,
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover {
  outline-color: transparent !important;
}
.ck.ck-editor__editable:not(.ck-column-resize_disabled) {
  border: none;
}
.table-container .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  border: none;
  box-shadow: none;
}
</style>
